import React from "react";
import InfoTooltipIcon from "../components/InfoTooltipIcon";

const InfoTooltipIconDemo: React.FC = () => {
  return (
    <div style={{ padding: "24px" }}>
      <h1>InfoTooltipIcon 示例</h1>
      <p>鼠标悬停在图标上时会显示提示信息。</p>
      <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
        {/* 示例内容 */}
        <InfoTooltipIcon
          titleContent={"开场白"}
          mainContent={
            <div style={{ fontSize: "13px", lineHeight: 1.7 }}>
              <div style={{ color: "#FFFFFF" }}>
                <div> 开场白是用户进入AI应用后自动展示的引导信息。</div>
                <div>
                  它的主要目的是帮助用户理解AI应用的用途，以及如何与其进行交互。
                </div>
              </div>
              <div>
                <div>开场白文案为 Markdown 格式，你可以通过 Markdown</div>
                <div> 语法调整文案样式效果，例如：</div>
              </div>
            </div>
          }
          extraContent={
            <div
              style={{
                backgroundColor: "#FAFAFF",
                borderRadius: "8px",
                padding: "12px",
                fontSize: "13px",
                color: "#4551E5",
                lineHeight: 1.7,
              }}
            >
              <div>
                你好，我是你的 <strong>**办公助手**</strong>，我可以帮助你。
              </div>
              <div>1.预定会议室 📌</div>
              <div>2.检索文件 🗂️</div>
              <div>3. 查询员工手册 📖</div>{" "}
            </div>
          }
          tooltipWidth={430} // 测试宽度调整
        />
      </div>
    </div>
  );
};

export default InfoTooltipIconDemo;
